<template>
	<view class="qh-empty-data flex-col-cn-cn" :style="customStyles">
		<image class="empty-image" :style="imageStyle" :src="imageUrl"></image>
		<view class="empty-text">
			<slot name="text" v-if="$slots['text']"></slot>
			<text v-else>{{text}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'qh-empty-data',
		props: {
			text: {
				type: String,
				default: '暂无数据~',
			},
			width: {
				type: [String, Number],
				default: '238rpx'
			}, //图片宽
			height: {
				type: [String, Number],
				default: '216rpx'
			}, //图片高
			customStyle: {
				type: [String, Object],
				default () {
					return {}
				}
			}, //自定义样式
		},
		computed: {
			imageUrl() {
				return this.$store.image_header + 'empty-search.png'
			},
			imageStyle() {
				return 'width:' + this.$getUnitSize(this.width) + ';height:' + this.$getUnitSize(this.height);
			},
			customStyles() {
				return this.$joinStyle(this.customStyle);
			}
		},
	}
</script>


<style lang="less">
	.qh-empty-data {
		width: 100%;

		.empty-image {
			width: 238rpx;
			height: 216rpx;
		}

		.empty-text {
			margin-top: 14rpx;
			font-size: 22rpx;
			line-height: 36rpx;
			color: #929397;
		}
	}
</style>
